<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

		<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
		<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	</head>
	<body>
		<div id="react">

		</div>
		<button type="button" >我是跳转按钮</button>
		<script type="text/babel">
			class App extends React.Component {
				constructor(props) {
					super(props)
					this.state = {
						todos: ['吃饭','睡觉']
					}
				}
				
				addTodo = (todo) => {
					const {todos} = this.state
					
					todos.unshift(todo)
					
					this.setState({
						todos
					})
				}
				render() {
					return (
						<div id="domId">
							<h1>我是测试数据</h1>
							<AppTodo addTodo={this.addTodo} />
							<List todos={this.state.todos}/>
						</div>
					)
				}
			}
			
			class AppTodo extends React.Component {
				constructor(props) {
				    super(props)
					
				}
				addData = () => {
					console.log(this.props)
					this.props.addTodo(this.input.value)
					this.input.value = ''
				}
				render() {
					return (
						<div>
							<input type="text" ref={input => this.input = input}></input>
							<button onClick={this.addData}>add</button>
						</div>
					)
				}
			}
			
			class List extends React.Component {
				
				constructor(props) {
				    super(props)
				}
				
				render() {
					return (
						<ul>
							{this.props.todos.map( (v,i) => <li key={i} onClick={this.clickLi}>{v}</li>)}
						</ul>
					)
				}
			}
			
			ReactDOM.render(<App />,document.getElementById('react'))
		</script>
		
	</body>
</html>
